var Index = {
    playnum: 0,
    myChart01:{},
    myChart02:{},
    init: function () {
        this.myChart01 = chart1;
        this.myChart02 = chart2;
        this._datepicker();
        this._chartInit();
        this._selectChange();
        this._queryData();
    },
    _datepicker:function(){
        $('.form_datetime').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            // initialDate: new Date(),
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
        });
        $('.js-chart1-start').datetimepicker().on('changeDate', function(ev){
            var date = $('#chart1_start').val();
            if(date && date !=="undefined"){
                $(".js-chart1-end").datetimepicker("setStartDate", new Date(date));
            }
        });

        $('.js-chart1-end').datetimepicker().on('changeDate', function(ev){
            var date = $('#chart1_end').val();
            if(date && date !=="undefined"){
                $(".js-chart1-start").datetimepicker("setEndDate", new Date(date));
            }

        });

        $('.js-chart2-start').datetimepicker().on('changeDate', function(ev){
            var date = $('#chart2_start').val();
            if(date && date !=="undefined"){
                $(".js-chart2-end").datetimepicker("setStartDate", new Date(date));
            }
        });

        $('.js-chart2-end').datetimepicker().on('changeDate', function(ev){
            var date = $('#chart2_end').val();
            if(date && date !=="undefined"){
                $(".js-chart2-start").datetimepicker("setEndDate", new Date(date));
            }

        });

        $('.js-table-start').datetimepicker().on('changeDate', function(ev){
            var date = $('#table_start').val();
            if(date && date !=="undefined"){
                $(".js-char2-end").datetimepicker("setStartDate", new Date(date));
            }
        });

        $('.js-table-end').datetimepicker().on('changeDate', function(ev){
            var date = $('#table_end').val();
            if(date && date !=="undefined"){
                $(".js-table-start").datetimepicker("setEndDate", new Date(date));
            }

        });
    },
    _selectChange:function(){
        $('#chart1_sel').on("change",function(){
            var data   = {},
                chart  = chart1,
                type   = $(this).val(),
                media_name = $('#media').find("option:selected").text();

            data.type       = type;
            data.media_name = media_name;
            $.ajax({
                type: 'POST',
                url: base_url+apis.indexData_url,
                data: data,
                dataType:"json",
                success: function (result) {
                    if(result.code==1){
                        var date          = [],
                            pv            = [],
                            click_count   = [],
                            click_rate    = [],
                            attend_data   = [],
                            unattend_data = [];
                        if(result.data.statistics && result.data.statistics.length>0){
                            var data = result.data.statistics;
                            for(var i=0;i<data.length;i++){
                                date.push(data[i]['d_date']);
                                pv.push(data[i]['pv']);
                                click_count.push(data[i]['click_count']);
                                click_rate.push(data[i]['click_rate']);
                                attend_data.push(data[i]['attend_count']);
                                unattend_data.push(data[i]['unattend_count']);
                            }
                        }
                        //更新数据
                        var option = chart.getOption();
                        option.xAxis[0].data = date;
                        option.xAxis[1].data  = date;
                        option.xAxis[2].data  = date;
                        option.xAxis[3].data  = date;
                        option.xAxis[4].data  = date;
                        option.xAxis[5].data  = date;
                        option.xAxis[6].data  = date;
                        option.series[0].data = pv;
                        option.series[1].data = click_count;
                        option.series[2].data = click_rate;
                        option.series[3].data = attend_data;
                        option.series[4].data = unattend_data;
                        option.series[5].data = attend_data;
                        option.series[6].data = attend_data;
                        chart.setOption(option);
                    }else{
                        alert("数据加载异常");
                    }
                },
                fail:function(){

                }
            })

        });
        $('#chart2_sel').on("change",function(){
            var data   = {},
                chart  = chart2,
                type   = $(this).val(),
                media_name = $('#media').find("option:selected").text();

            data.type       = type;
            data.media_name = media_name;
            $.ajax({
                type: 'POST',
                url: base_url+apis.indexData_url,
                data: data,
                dataType:"json",
                success: function (result) {
                    if(result.code==1){
                        var filter_data = [];
                        if(result.data.filler_data ){
                            filter_data = result.data.filler_data
                        }
                        //更新数据
                        var option = chart.getOption();
                        option.series[0].data = filter_data;
                        chart.setOption(option);
                    }else{
                        alert("数据加载异常");
                    }
                },
                fail:function(){

                }
            })
        });
        $('#table_sel').on("change",function(){
            var data       = {},
                type       = $(this).val();
                media_name = $('#media').find("option:selected").text();

            data.type       = type;
            data.media_name = media_name;
            $.ajax({
                type: 'POST',
                url: base_url+apis.indexData_url,
                data: data,
                dataType:"json",
                success: function (result) {
                    if(result.code==1){
                        var html = "";
                        if(result.data.statistics && result.data.statistics.length>0){
                            var data = result.data.statistics;
                            for(var i=0;i<data.length;i++){
                                html += '<tr>' +
                                        '   <td>'+data[i]['d_date']+'</td>' +
                                        '   <td>'+data[i]['media_name']+'</td>' +
                                        '   <td>'+data[i]['pv']+'</td>' +
                                        '   <td>'+data[i]['click_count']+'</td>' +
                                        '   <td>'+data[i]['click_rate']+'</td>' +
                                        '   <td>'+data[i]['attend_count']+'</td>' +
                                        '   <td>'+data[i]['unattend_count']+'</td>' +
                                        '   <td>'+data[i]['attend_count']+'</td>' +
                                        '   <td>'+data[i]['attend_count']+'</td>' +
                                        '</tr>';
                            }
                        }
                        $('.table').find('tbody').empty().append(html);
                    }else{
                        alert("数据加载异常");
                    }
                },
                fail:function(){

                }
            })
        });
    },
    _chartInit:function(){
        var arrData = JSON.parse(date.replace(/&quot;/g,'"'));
        var click_rate = JSON.parse(rate.replace(/&quot;/g,'"'));
        var filler_data = JSON.parse(filler.replace(/&quot;/g,'"'));
        var colors = ['#5d9cec', '#f15755', '#64c981', '#fc863f', '#deec00', '#e400ec', '#00ecd3', '#ccc'];
        option01 = {
            color: colors,
            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data:['广告展示数', '点击量', '点击率', '新关注', '取消关注', '净增人数', '累计人数']
            },
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[6]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '广告展示数  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: arrData
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[5]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '点击量  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: arrData
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[4]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '点击率  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: arrData
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[3]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '新关注  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: arrData
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '取消关注  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: arrData
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '净增人数  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data:arrData
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '累计人数  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: arrData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name:'广告展示数',
                    type:'line',
                    xAxisIndex: 6,
                    smooth: true,
                    data: pv
                },{
                    name:'点击量',
                    type:'line',
                    xAxisIndex: 5,
                    smooth: true,
                    data: click_count
                }
                ,{
                    name:'点击率',
                    type:'line',
                    xAxisIndex: 4,
                    smooth: true,
                    data: click_rate
                } ,
                {
                    name:'新关注',
                    type:'line',
                    xAxisIndex: 3,
                    smooth: true,
                    data: attend_data
                } ,
                {
                    name:'取消关注',
                    type:'line',
                    xAxisIndex: 2,
                    smooth: true,
                    data: unattend_data
                } ,
                {
                    name:'净增人数',
                    type:'line',
                    xAxisIndex: 1,
                    smooth: true,
                    data: attend_data
                } ,
                {
                    name:'累计人数',
                    type:'line',
                    xAxisIndex: 0,
                    smooth: true,
                    data: attend_data
                }
            ]
        };

        // 基于准备好的dom，初始化echarts实例
        // 指定图表的配置项和数据
        option02 = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['广告展示', '广告点击', '关注公众号', '取消关注'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:filler_data
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        this.myChart01.setOption(option01);
        this.myChart02.setOption(option02);
    },
    _queryData:function(){
        $('.js-btn-chart1').on("click",function(){
            var data   = {};
            var chart  = chart1;
            var start  = $('#chart1_start').val();
            var end    = $('#chart1_end').val();
            var date1  = new Date(start);  //开始时间
            var date2  = new Date(end);    //结束时间
            var date3  = date2.getTime()-date1.getTime();  //时间差的毫秒数
            var media_name = $('#media').find("option:selected").text();
            //计算出相差天数
            var days=Math.floor(date3/(24*3600*1000));
            if(days>=365){
                alert("最多只能查询1年的数据");
                return;
            }
            data.start_date = start;
            data.end_date   = end;
            data.media_name = media_name;
            $.ajax({
                type: 'POST',
                url: base_url+apis.indexData_url,
                data: data,
                dataType:"json",
                success: function (result) {
                    if(result.code==1){
                        var date          = [],
                            pv            = [],
                            click_count   = [],
                            click_rate    = [],
                            attend_data   = [],
                            unattend_data = [];
                        if(result.data.statistics && result.data.statistics.length>0){
                            var data = result.data.statistics;
                            for(var i=0;i<data.length;i++){
                                date.push(data[i]['d_date']);
                                pv.push(data[i]['pv']);
                                click_count.push(data[i]['click_count']);
                                click_rate.push(data[i]['click_rate']);
                                attend_data.push(data[i]['attend_count']);
                                unattend_data.push(data[i]['unattend_count']);
                            }
                        }
                        //更新数据
                        var option = chart.getOption();
                        option.xAxis[0].data = date;
                        option.xAxis[1].data  = date;
                        option.xAxis[2].data  = date;
                        option.xAxis[3].data  = date;
                        option.xAxis[4].data  = date;
                        option.xAxis[5].data  = date;
                        option.xAxis[6].data  = date;
                        option.series[0].data = pv;
                        option.series[1].data = click_count;
                        option.series[2].data = click_rate;
                        option.series[3].data = attend_data;
                        option.series[4].data = unattend_data;
                        option.series[5].data = attend_data;
                        option.series[6].data = attend_data;
                        chart.setOption(option);
                    }else{
                        alert("数据加载异常");
                    }
                },
                fail:function(){

                }
            })
        });
        $('.js-btn-chart2').on("click",function(){
            var data   = {};
            var chart  = chart2;
            var start  = $('#chart2_start').val();
            var end    = $('#chart2_end').val();
            var date1  = new Date(start);  //开始时间
            var date2  = new Date(end);    //结束时间
            var date3  = date2.getTime()-date1.getTime();  //时间差的毫秒数
            var media_name = $('#media').find("option:selected").text();
            //计算出相差天数
            var days=Math.floor(date3/(24*3600*1000));
            if(days>=365){
                alert("最多只能查询1年的数据");
                return;
            }
            data.start_date = start;
            data.end_date   = end;
            data.media_name = media_name;
            $.ajax({
                type: 'POST',
                url: base_url+apis.indexData_url,
                data: data,
                dataType:"json",
                success: function (result) {
                    if(result.code==1){
                        var filter_data = [];
                        if(result.data.filler_data ){
                            filter_data = result.data.filler_data
                        }
                        //更新数据
                        var option = chart.getOption();
                        option.series[0].data = filter_data;
                        chart.setOption(option);
                    }else{
                        alert("数据加载异常");
                    }
                },
                fail:function(){

                }
            })
        });
        $('.js-btn-table').on("click",function(){
            var data   = {};
            var start  = $('#table_start').val();
            var end    = $('#table_end').val();
            var date1  = new Date(start);  //开始时间
            var date2  = new Date(end);    //结束时间
            var date3  = date2.getTime()-date1.getTime();  //时间差的毫秒数
            var media_name = $('#media').find("option:selected").text();
            //计算出相差天数
            var days=Math.floor(date3/(24*3600*1000));
            if(days>=365){
                alert("最多只能查询1年的数据");
                return;
            }
            data.start_date = start;
            data.end_date   = end;
            data.media_name = media_name;
            $.ajax({
                type: 'POST',
                url: base_url+apis.indexData_url,
                data: data,
                dataType:"json",
                success: function (result) {
                    if(result.code==1){
                        var html = "";
                        if(result.data.statistics && result.data.statistics.length>0){
                            var data = result.data.statistics;
                            for(var i=0;i<data.length;i++){
                                html += '<tr>' +
                                    '   <td>'+data[i]['d_date']+'</td>' +
                                    '   <td>'+data[i]['media_name']+'</td>' +
                                    '   <td>'+data[i]['pv']+'</td>' +
                                    '   <td>'+data[i]['click_count']+'</td>' +
                                    '   <td>'+data[i]['click_rate']+'</td>' +
                                    '   <td>'+data[i]['attend_count']+'</td>' +
                                    '   <td>'+data[i]['unattend_count']+'</td>' +
                                    '   <td>'+data[i]['attend_count']+'</td>' +
                                    '   <td>'+data[i]['attend_count']+'</td>' +
                                    '</tr>';
                            }
                        }
                        $('.table').find('tbody').empty().append(html);
                    }else{
                        alert("数据加载异常");
                    }
                },
                fail:function(){

                }
            })
        });
    },

}
